import React, { Component } from 'react'
import { Layout, Menu } from 'antd';
import { Layout, Menu, } from 'antd';
import { NotificationOutlined } from '@ant-design/icons';

const { SubMenu } = Menu;
import { UploadOutlined, UserOutlined, VideoCameraOutlined } from '@ant-design/icons';
const { Sider } = Layout;
export default class sideMenu extends Component {
    state = {
        collapsed: false,
    };

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };
    render() {
        return (
            <div>
                <Sider trigger={null} collapsible collapsed={this.state.collapsed} style={{ height: "100%" }}>
                    <div className="logo" />
                    <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                        <SubMenu key="sub3" icon={<NotificationOutlined />} title="subnav 3">
                            <Menu.Item key="9">option9</Menu.Item>
                            <Menu.Item key="10">option10</Menu.Item>
                            <Menu.Item key="11">option11</Menu.Item>
                            <Menu.Item key="12">option12</Menu.Item>
                        </SubMenu>
                        <Menu.Item key="2" icon={<VideoCameraOutlined />}>
                            nav 2
                        </Menu.Item>
                        <Menu.Item key="3" icon={<UploadOutlined />}>
                            nav 3
                        </Menu.Item>
                    </Menu>
                </Sider>
            </div>
        )
    }
}
